<template>
    <div class="main-content">
        <div class="pad_20">
            <div class="concent_title">
                <span></span>
                <b>分销佣金-机构详情</b>
                <hr style="height:3px;">
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">汇总数据</h3>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                        <tr>
                            <td>楼盘名称</td>
                            <td>合作机构</td>
                            <td>成交套数</td>
                            <td>总佣金<p>（合作机构）</p></td>
                            <td>已结佣金<p>（合作机构）</p></td>
                            <td>待结佣金<p>（合作机构）</p></td>
                            <td>总佣金<p>（开发商）</p></td>
                            <td>已结佣金<p>（开发商）</p></td>
                            <td>待结佣金<p>（开发商）</p></td>
                            <td>总佣金<p>（本部机构）</p></td>
                            <td>已结佣金<p>（本部机构）</p></td>
                            <td>待结佣金<p>（本部机构）</p></td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{settlementRecord.premisesName}}</td>
                            <td>{{settlementRecord.agentCompanyName}}</td>
                            <td>{{settlementRecord.dealNum}}</td>
                            <td>{{settlementRecord.agentCommission}}</td>
                            <td>{{settlementRecord.agentReceivedCommission}}</td>
                            <td>{{settlementRecord.agentPendingCommission}}</td>
                            <td>{{settlementRecord.devCommission}}</td>
                            <td>{{settlementRecord.devReceivedCommission}}</td>
                            <td>{{settlementRecord.devPendingCommission}}</td>
                            <td>{{settlementRecord.orgCommission}}</td>
                            <td>{{settlementRecord.orgReceivedCommission}}</td>
                            <td>{{settlementRecord.orgPendingCommission}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">机构佣金明细数据</h3>
                </div>
                <div class="panel-body">
                    <table class="table" >
                        <thead>
                        <tr>
                            <td>序号</td>
                            <td>报备ID</td>
                            <td>楼盘名称</td>
                            <td>房间号</td>
                            <td>客户姓名</td>
                            <td>客户电话</td>
                            <td>计价面积(㎡)</td>
                            <td>成交总价(元)</td>
                            <td>签约日期</td>
                            <td>合作机构名称</td>
                            <td>经纪人姓名</td>
                            <td>经纪人电话</td>
                            <td>结佣方式</td>
                            <td>合作机构佣金结算状态</td>
                            <td>开发商结佣状态</td>
                            <td>总佣金<p>（合作机构）</p></td>
                            <td>已结佣金<p>（合作机构）</p></td>
                            <td>待结佣金<p>（合作机构）</p></td>
                            <td>总佣金<p>（开发商）</p></td>
                            <td>已结佣金<p>（开发商）</p></td>
                            <td>待结佣金<p>（开发商）</p></td>
                            <td>总佣金<p>（本部机构）</p></td>
                            <td>已结佣金<p>（本部机构）</p></td>
                            <td>待结佣金<p>（本部机构）</p></td>
                            <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in commissionDetailList">
                            <td >{{(params.pageNo-1)*params.pageSize+index+1}}</td>
                            <td>{{item.reportId}}</td>
                            <td>{{item.premisesName}}</td>
                            <td>{{item.roomName}}</td>
                            <td>{{item.customerName}}</td>
                            <td>{{item.mobile}}</td>
                            <td>{{item.valuationArea}}</td>
                            <td>{{item.dealAmount}}</td>
                            <td>{{item.signTime}}</td>
                            <td>{{item.companyName}}</td>
                            <td>{{item.staffName}}</td>
                            <td>{{item.staffPhone}}</td>
                            <td>{{item.commissionWay}}</td>
                            <td>
                                <div v-if="item.agentCommissionStatus == '0'">待结佣</div>
                                <div v-if="item.agentCommissionStatus == '1'">完成结佣</div>
                                <div v-if="item.agentCommissionStatus == '2'">部分结佣</div>
                            </td>
                            <td>
                                <div v-if="item.devCommissionStatus == '0'">待结佣</div>
                                <div v-if="item.devCommissionStatus == '1'">完成结佣</div>
                                <div v-if="item.devCommissionStatus == '2'">部分结佣</div>
                            </td>
                            <td>{{item.agentCommission}}</td>
                            <td>{{item.agentReceivedCommission}}</td>
                            <td>{{item.agentPendingCommission}}</td>
                            <td>{{item.devCommission}}</td>
                            <td>{{item.devReceivedCommission}}</td>
                            <td>{{item.devPendingCommission}}</td>
                            <td>{{item.orgCommission}}</td>
                            <td>{{item.orgReceivedCommission}}</td>
                            <td>{{item.orgPendingCommission}}</td>
                            <td style="vertical-align: middle;">
					        	<button class="btn btn-theme" style="outline:none;" @click="goCusPreDetail(item.reportId)">查看</button>
					        </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div id="boebei_num"style="text-align: center;"></div>
            </div>
        </div>
        <!-- <CusPreDetailModal v-bind:cusPreId="cusPreId" v-on:closeModalListener='saveAuditReturn'></CusPreDetailModal> -->
    </div>
</template>
<script>
	// import CusPreDetailModal from '../cuspre/cusPreDetailModal.vue'
    export default{
        components: {
            // CusPreDetailModal
        },
        data(){
            return{
                commissionDetailList:[],
                settlementRecord:{},
                params:{
                    pageNo:1,
                    pageSize:10,
                    agentOrgId:this.$route.params.agentOrgId,
                    premisesId:this.$route.params.premisesId
                },
                cusPreId:'',
            }
        },
        mounted(){
            this.getSettlementPage();
            this.getSettlementRecord();
        },
        methods:{
            //获取佣金报备记录
            getSettlementPage:function(){
                var _self = this;
                var url =  _self.utilHelper.apiUrl+"/api/cp/getAgentCustomerPremisesCommissionPage";
                var body = {};
                body.params = this.params;
                _self.$http.post(url, body).then((response) => {
                    var body = response.body;
                    if(body.result == '1'){
                        _self.commissionDetailList = body.resData.page.rows;
                        var current = body.resData.page.pageNumber;
                        var total = body.resData.page.total;
                        var totalPages = body.resData.page.totalPages;
                       // _self.showPage(body.page.total,body.page,body.page.totalPages);
                        if(totalPages >= 0) {
                            layui.laypage.render({
                                elem: $('#boebei_num'), //容器。值支持id名、原生dom对象，jquery对象,
                                limit:_self.params.pageSize,
                                curr:current,
                                count:total,
                                theme: '#f87242;', //皮肤
                                first: '首页', //若不显示，设置false即可
                                last: '尾页', //若不显示，设置false即可
                                prev: '上一页', //若不显示，设置false即可
                                next: '下一页', //若不显示，设置false即可
                                layout:['prev', 'page', 'next','skip','count'],

                                jump: function(obj,first){
                                    if(!first){
                                        _self.params.pageNo=obj.curr;
                                        _self.getSettlementPage();
                                    }
                                }
                            });
                        }

                    }
                })
            },
            //获取佣金记录
            getSettlementRecord:function(){
                var _self = this;
                var url =  _self.utilHelper.apiUrl+"/api/cp/getAgentCommissionSummary";
                var body = {};
                body.params = {agentOrgId:this.$route.params.agentOrgId,premisesId:this.$route.params.premisesId};
                _self.$http.post(url, body).then((response) => {
                    var body = response.body;
                    if(body.result == '1'){
                        _self.settlementRecord = body.resData.data;
                        if(_self.settlementRecord){
                            _self.settlementRecord.number = 1;
                        }
                    }
                })
            },
            showPage:function(total,currer,totalPages){
                var _self = this;
                if(totalPages>0){
                    layui.laypage.render({
                        elem: 'boebei_num', //容器。值支持id名、原生dom对象，jquery对象,
                        pages: totalPages, //总页数
                        limit:10,
                        curr:currer,
                        count:total,//总数量
                        theme: '#09C', //皮肤
                        first: '首页', //若不显示，设置false即可
                        last: '尾页', //若不显示，设置false即可
                        prev: '上一页', //若不显示，设置false即可
                        next: '下一页', //若不显示，设置false即可
                        layout:['prev', 'page', 'next','count'],
                        jump: function(obj,first){
                            if(!first){
                                var currPage=obj.curr;
                                _self.params.pageNo = currPage;
                                _self.getSettlementPage();
                            }
                        }
                    });
                }else{
                    $("#boebei_num").html("");
                }
            },
            // 查看报备详情
            goCusPreDetail(cusPreId){
                // 跳转报备详情,新打开一个而窗口
                let router=this.$router.resolve({
                   path: '/cusPreDetail/' + cusPreId
                })
                window.open(router.href,'_blank') 
                // this.cusPreId = id;
				// $("#cusPreDetailModal").modal({
				// 	backdrop: 'static',
				// 	keyboard: false
				// });

            },
            saveAuditReturn() {
				this.getSettlementPage();
                this.getSettlementRecord();
			},
        },
    }
</script>
<style>
.main-content .panel .panel-body{
    overflow-x: auto;
}
.main-content .panel .panel-body .table td{
    min-width: 100px;
}
</style>
